<template>
  <div
    class="VueFilePreviewer"
    :style="{
      width: pageConfig.width + 'px',
      height: pageConfig.height + 'px',
      backgroundColor: pageConfig.bgColor,
    }"
  >
    <WidgetWrapper
      v-for="(widgetConfig, index) in widgetConfigs"
      :key="widgetConfig.id || index"
      :widgetConfig="widgetConfig"
      :getComponent="getComponent"
    ></WidgetWrapper>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Inject } from 'vue-property-decorator'
import PageConfig from '@/core/model/PageConfig';
import WidgetWrapper from './WidgetWrapper.vue'
import ApplicationEditor from '../ApplicationEditor.vue';

@Component({
  components: { WidgetWrapper }
})
export default class VueFilePreviewer extends Vue {
  @Inject('app-editor')
  public appEditor!: ApplicationEditor

  @Prop()
  private pageConfig!: PageConfig;

  private get widgetConfigs() {
    return this.pageConfig.widgetConfigs
  }

  public getComponent(widgetTag: string) {
    return this.appEditor.getWidgetComponent(widgetTag)
  } 
}
</script>
<style scoped lang="scss">
@import '~@/style/variables';
.VueFilePreviewer {
  position: relative;
  background: red;
}
</style>
